﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/ga.js" async="" type="text/javascript"></script>
    <script type="text/javascript">        var NREUMQ = NREUMQ || []; NREUMQ.push(["mark", "firstbyte", new Date().getTime()]);</script>
    <title>Educación</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta name="description" content="Default Description">
    <meta name="keywords" content="Magento, Varien, E-commerce">
    <meta name="robots" content="INDEX,FOLLOW">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link href="css/css_003.css" rel="stylesheet" type="text/css">
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link href="css/css_002.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-1.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/jquery_004.js"></script>
    <script type="text/javascript" src="js/jquery_002.js"></script>
    <script type="text/javascript" src="js/easyTooltip.js"></script>
    <script type="text/javascript" src="js/jquery_005.js"></script>
    <script type="text/javascript" src="js/jquery_003.js"></script>
    <!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
    var BLANK_URL = 'http://livedemo00.template-help.com/magento_42968/js/blank.html';
    var BLANK_IMG = 'http://livedemo00.template-help.com/magento_42968/js/spacer.gif';
//]]>
</script>
<![endif]-->
    <!--[if lt IE 9]>
<div style=' clear: both; text-align:center; position: relative;'>
 <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
</div>
<![endif]-->
    <!--[if lt IE 9]>
	<style>
	body {
		min-width: 960px !important;
	}
	</style>
<![endif]-->
    <!--<link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/responsive.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/camera.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/widgets.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/cloud-zoom.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print">
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/ccard.js"></script>
    <script type="text/javascript" src="js/validation.js"></script>
    <script type="text/javascript" src="js/builder.js"></script>
    <script type="text/javascript" src="js/effects.js"></script>
    <script type="text/javascript" src="js/dragdrop.js"></script>
    <script type="text/javascript" src="js/controls.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script type="text/javascript" src="js/form.js"></script>
    <script type="text/javascript" src="js/translate.js"></script>
    <script type="text/javascript" src="js/cookies.js"></script>
    <script type="text/javascript" src="js/cloud-zoom.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/msrp.js"></script>-->
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/responsive.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/superfish.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/camera.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/widgets.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/cloud-zoom.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/print.css" media="print">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/ccard.js"></script>
    <script type="text/javascript" src="js/builder.js"></script>
    <script type="text/javascript" src="js/cookies.js"></script>
    <script type="text/javascript" src="js/cloud-zoom.js"></script>
    <!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://livedemo00.template-help.com/magento_42968/skin/frontend/default/theme451/css/styles-ie.css" media="all" />
<![endif]-->
    <!--[if lt IE 7]>
<script type="text/javascript" src="http://livedemo00.template-help.com/magento_42968/js/lib/ds-sleight.js"></script>
<script type="text/javascript" src="http://livedemo00.template-help.com/magento_42968/skin/frontend/base/default/js/ie6.js"></script>
<![endif]-->
    <script type="text/javascript">
//<![CDATA[
        Mage.Cookies.path = '/magento_42968';
        Mage.Cookies.domain = '.livedemo00.template-help.com';
//]]>
    </script>
    <style>
        #map-canvas
        {
            position: absolute;
            height: 75%;
            width: 95%;
            background-color: White;
        }
        
        .styled-select
        {
            width: 35%;
            height: 34px;
            overflow: hidden;
            background: url(images/flecha_abajo.png) no-repeat right #ddd;
            padding: 3px;
            margin: 5px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
            color: #888;
            border: none;
            outline: none;
            display: inline-block;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var global = 0;
        var map;
        var markers = [];
        //Crea la ventana de información y limpia la propiedad content
        var infowindow = new google.maps.InfoWindow({
            content: ""
        })

        function initialize() {
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(5.067711, -75.518024),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            verDatos();
        }

        google.maps.event.addDomListener(window, 'load', crearMapa);

        function verDatos(Departamento, Nivel) {
            var url = "http://servicedatosabiertoscolombia.cloudapp.net/v1/Ministerio_de_educacion_nacional/sedeseducativas?$filter=nombre_departamento='" + Departamento + "'&$format=json";
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    $.each(data, function (i, field) {
                        var cant = field.length;
                        $.each(field, function (x, item) {
                            if (omitirAcentos(field[x].niveles).toString().indexOf(Nivel) != -1) {
                                PosicionGoogle(field[x].nombre_departamento, field[x].nombre_municipio, field[x].nombre_establecimiento, field[x].direccion, field[x].telefono, field[x].niveles);
                            }
                        });
                    });
                },
                error: function (x, y, z) {

                }
            });
        }

        function crearMapa() {
            markers = [];
            var Depto = document.getElementById("departamentos_combo").value;
            var Nivel = document.getElementById("niveles_combo").value;
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=Colombia,' + Depto + '&sensor=true', function (data) {
                var mapOptions = {
                    zoom: 7,
                    center: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
                verDatos(Depto, Nivel);
            });
        }

        function PosicionGoogle(departamento, ciudad, nombre, direccion, telefono, niveles) {
            Depto = document.getElementById("departamentos_combo").value;
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=Colombia,' + Depto + ',' + ciudad + '&sensor=true', function (data) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng),
                    map: map
                });
                marker.Message = "<strong>Nombre de la institución</strong>: " + nombre + "<br />";
                marker.Message += "<strong>Dirección</strong>: " + direccion + "<br />";
                marker.Message += "<strong>Telefono</strong>: " + telefono + "<br />";
                marker.Message += "<strong>Niveles que ofrece</strong>: " + niveles + "<br />";
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.setContent(this.Message)
                    infowindow.open(map, this);
                });
                markers.push(marker);
            });
        }

        //Eliminar todos los markers del vector para limpiar el mapa
        function borrarMarkers() {

            //                alert(markers.length);
            //                for (i in markers) {
            //                
            //                    markers[i].setMap(null);
            //                }
            //                markers.length = 0;
            var mapOptions = {
                zoom: 15,
                center: new google.maps.LatLng(5.067711, -75.518024),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        }

        function omitirAcentos(text) {
            var acentos = "ÃÀÁÄÂÈÉËÊÌÍÏÎÒÓÖÔÙÚÜÛãàáäâèéëêìíïîòóöôùúüûÑñÇç";
            var original = "AAAAAEEEEIIIIOOOOUUUUaaaaaeeeeiiiioooouuuunncc";
            for (var i = 0; i < acentos.length; i++) {
                if (text != null) {
                    text = text.replace(acentos.charAt(i), original.charAt(i));
                }
            }
            return text.toLowerCase();
        }

    </script>
</head>
<body class=" catalog-category-view categorypath-servers-html category-servers">
    <div class="wrapper en-lang-class">
        <noscript>
            <div class="global-site-notice noscript">
                <div class="notice-inner">
                    <p>
                        <strong>Active javascript en su navegador.</strong><br />
                    </p>
                </div>
            </div>
        </noscript>
        <div class="page">
            <div class="header-container">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div class="header">
                                <!-- <p class="welcome-msg"> </p> -->
                                <!--<div class="header-buttons">
                                    <div class="row-1">
                                        <div class="header-button top-login">
                                            <ul style="display: none;" class="links">
                                                <li class="first last"><a href="#" title="Log In" class="Login_link">Log In</a></li>
                                            </ul>
                                        </div>
                                        <div class="header-button menu-list">
                                            <a href="#"></a>
                                            <ul style="display: none;" class="links">
                                                <li class="first"><a href="#" title="My Account">My Account</a></li>
                                                <li><a href="#" title="My Cart" class="top-link-cart">My Cart</a></li>
                                                <li><a href="#" title="Checkout" class="top-link-checkout">Checkout</a></li>
                                                <li class=" last"><a href="#" title="My Wishlist">My Wishlist</a></li>
                                            </ul>
                                        </div>
                                        <div class="header-button currency-list">
                                            <a href="#">$</a>
                                            <ul style="display: none;">
                                                <li><a href="#" title="GBP">British Pound Sterling - GBP</a> </li>
                                                <li><a href="#" title="EUR">Euro - EUR</a> </li>
                                                <li><a href="#" title="USD">US Dollar - USD</a> </li>
                                            </ul>
                                        </div>
                                        <div class="header-button lang-list">
                                            <a href="#">en </a>
                                            <ul style="display: none;">
                                                <li><a href="#" title="en_US">English</a> <span>en </span></li>
                                                <li><a href="#" title="de_DE">German</a> <span></span></li>
                                                <li><a href="#" title="es_ES">Spanish</a> <span></span></li>
                                                <li><a href="#" title="ru_RU">Russian</a> <span></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>-->
                                <h1 class="logo">
                                    <strong>Sigci</strong><a href="#" title="Gadget online" class="logo"><img src="images/logo.png"
                                        alt="Gadget online"></a></h1>
                                <h1 class="logo">
                                    <strong>Min Tic</strong><a href="#" title="Gadget online" class="logo"><img src="images/mintic.png"
                                        alt="Gadget online"></a></h1>
                                <h1 class="logo">
                                    <strong>Prosperidad para Todos</strong><a href="#" title="Gadget online" class="logo"><img
                                        src="images/prosperidad.png" alt="Gadget online"></a></h1>
                                <h1 class="logo">
                                    <strong>Vive Digital</strong><a href="#" title="Gadget online" class="logo"><img
                                        src="images/vivedigital.png" alt="Gadget online"></a></h1>
                                <!--<div class="row-2">
                                    <div class="block-cart-header">
                                        <h3>
                                            My Cart:</h3>
                                        <div class="block-content">
                                            <div class="empty">
                                                0 item(s) <span class="price">$0.00</span>
                                                <div style="display: none;" class="cart-content">
                                                    You have no items in your shopping cart.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="quick-access">
                                        <div class="header-links">
                                            <ul class="links LoginLink">
                                                <li class="first"><a href="#" title="My Account">My Account</a></li>
                                                <li><a href="#" title="My Cart" class="top-link-cart">My Cart</a></li>
                                                <li><a href="#" title="Checkout" class="top-link-checkout">Checkout</a></li>
                                                <li class=" last"><a href="#" title="My Wishlist">My Wishlist</a></li>
                                            </ul>
                                            <ul class="links">
                                                <li class="first last"><a href="#" title="Log In" class="Login_link">Log In</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div class="clear">
                                </div>-->
                            </div>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="nav-container" style="margin-top: 10px;">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div id="menu-icon">
                                Categorías</div>
                            <ul id="nav" class="sf-menu sf-js-enabled">
                                <li class="level0 nav-1 first level-top"><a href="index.html" class="level-top"><span>
                                    HOME</span></a> </li>
                                <li class="level0 nav-1 first level-top parent"><a href="#" class="level-top"><span>
                                    ICBF</span></a>
                                    <ul style="display: none;" class="level0">
                                        <li class="level1 nav-1-1 first"><a href="icbf.html"><span>Puntos de atención</span></a></li>
                                        <li class="level1 nav-1-2"><a href="icbf-bienestarina.html"><span>Puntos de distribución
                                            de bienestarina</span></a></li>
                                    </ul>
                                </li>
                                <li class="level0 nav-2 level-top parent"><a href="#" class="level-top"><span>Educación</span></a>
                                    <ul style="display: none;" class="level0">
                                        <li class="level1 nav-2-1 first"><a href="instituciones.html"><span>Instituciones de
                                            educación para el trabajo y el desarrollo humano</span></a></li>
                                            <li class="level1 nav-2-1 first"><a href="ins-educativas.html"><span>Establecimientos educativos</span></a></li>
                                    </ul>
                                </li>
                                <li class="level0 nav-3 level-top parent"><a href="#" class="level-top"><span>Salud</span></a><ul
                                    style="display: none;" class="level0">
                                    <li class="level1 nav-3-1 first"><a href="indicadores.html"><span>Indicador de salubridad
                                        del agua</span></a></li>
                                </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="clear">
                    </div>
                </div>
            </div>
            <div class="main-container col2-right-layout">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div class="main">
                                <div class="breadcrumbs">
                                    <ul>
                                        <li class="home"><a href="#" title="Go to Home Page">Inicio</a> <span>&gt;</span>
                                        </li>
                                        <li class="category3"><strong>Instituciones educativas</strong> </li>
                                    </ul>
                                </div>
                                <div class="row">
                                    <div class="col-main span12">
                                        <div class="padding-s">
                                            <div class="page-title category-title">
                                                <h1>
                                                    Establecimientos educativos de preescolar, básica y media</h1>
                                            </div>
                                            <div class="block-title">
                                                <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                                                    el departamento que desea consultar:</span> </strong>
                                                <br />
                                                <select id="departamentos_combo" class="styled-select" onchange="crearMapa()">
                                                    <option value="Amazonas">Amazonas</option>
                                                    <option value="Antioquia">Antioquia</option>
                                                    <option value="Arauca">Arauca</option>
                                                    <option value="Atlantico">Atlántico</option>
                                                    <option value="Bolivar">Bolívar</option>
                                                    <option value="Boyacá">Boyacá</option>
                                                    <option value="Caldas">Caldas</option>
                                                    <option value="Caqueta">Caquetá</option>
                                                    <option value="Casanare">Casanare</option>
                                                    <option value="Cauca">Cauca</option>
                                                    <option value="Cesar">Cesar</option>
                                                    <option value="Choco">Chocó</option>
                                                    <option value="Cordoba">Córdoba</option>
                                                    <option value="Cundinamarca">Cundinamarca</option>
                                                    <option value="Guainia">Guainía</option>
                                                    <option value="Guaviare">Guaviare</option>
                                                    <option value="Huila">Huila</option>
                                                    <option value="Guajira">La Guajira</option>
                                                    <option value="Magdalena">Magdalena</option>
                                                    <option value="Meta">Meta</option>
                                                    <option value="Nariño">Nariño</option>
                                                    <option value="Norte de Santander">Norte de Santander</option>
                                                    <option value="Putumayo">Putumayo</option>
                                                    <option value="Quindio">Quindío</option>
                                                    <option value="Risaralda">Risaralda</option>
                                                    <option value="San Andres">San Andrés y Providencia</option>
                                                    <option value="Santander">Santander</option>
                                                    <option value="Sucre">Sucre</option>
                                                    <option value="Tolima">Tolima</option>
                                                    <option value="Valle">Valle del Cauca</option>
                                                    <option value="Vaupes">Vaupés</option>
                                                    <option value="Vichada">Vichada</option>
                                                </select>
                                                <br />
                                                <strong><span style="font-size: 18px !important; color: Black; font-weight: 400;">Seleccione
                                                    el nivel académico:</span> </strong>
                                                <br />
                                                <select id="niveles_combo" class="styled-select" onchange="crearMapa()">
                                                    <option value="preescolar">Preescolar</option>
                                                    <option value="primaria">Básica primaria</option>
                                                    <option value="secundaria">Básica secundaria</option>
                                                    <option value="media">Media</option>
                                                </select>
                                            </div>
                                            <br />
                                            <div class="category-products" style="min-height: 850px;">
                                                <!-- Aca va el contenido principal de la pagina   -->
                                                <div id="map-canvas">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-container-2">
                <div class="container">
                    <div class="row">
                        <div class="span12">
                            <div class="footer footer2">
                                <address>
                                    ©
                                    <script type="text/javascript">                                        var mdate = new Date(); document.write(mdate.getFullYear());</script>
                                    SIGCI. Todos los derechos reservados.
                                </address>
                                <!--{%FOOTER_LINK}-->
                                <div class="clear">
                                </div>
                                <!--<div class="paypal-logo">
                                    <a href="#" title="Additional Options" onclick="javascript:window.open('https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','paypal','width=600,height=350,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;">
                                        <img src="images/bnr_nowAccepting_150x60.gif" alt="Additional Options" title="Additional Options"></a>
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--LIVEDEMO_00 -->
    <script src="js/rum.js" type="text/javascript"></script>
    <script src="js/72d7dcce33.js" type="text/javascript"></script>
</body>
</html>
